<template>
  <!-- 如果有 Tabbar，设置 padding-bottom -->
  <div
    class="border-box flex min-h-screen flex-col bg-[#efefef] pb-safe"
    :class="className"
    :style="{ paddingBottom: tabbarHeight + 'px' }"
  >
    <image v-if="backgroundImage" :src="backgroundImage" mode="scaleToFill" class="no-repeat z-1 fixed left-0 top-0 w-full" />
    <!-- 网页内容 -->
    <div class="relative z-[1] flex flex-1 flex-col">
      <slot />
    </div>
    <Tabbar ref="tabbarRef" v-if="showTabBar" />

    <LoginButton v-if="needLogin" :styleProps="{ bottom: tabbarHeight + 'px' }" />
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import Tabbar from './components/Tabbar.vue'
import { useAccountStore } from '@/store'
import LoginButton from '@/components/loginButton/index.vue'
type propType = {
  showTabBar?: boolean
  className?: string
  backgroundImage?: string
  needLogin?: boolean
}

const props = withDefaults(defineProps<propType>(), {
  showTabBar: false,
  className: '',
  backgroundImage: '',
  needLogin: false
})

const accountStore = useAccountStore()

onMounted(() => {})
const tabbarRef = ref<any>()
const systemInfo = uni.getSystemInfoSync()
// 获取安全区高度
const tabbarHeight = computed(() => {
  return tabbarRef.value?.height ?? systemInfo?.safeAreaInsets?.bottom ?? 0
})
</script>

<style scoped lang="scss">
image {
}
</style>
